<template>
  <div class="page-content">
    <div class="form-box">
      <my-form
        :initial-form-data="formData"
        :form-items="formOption"
        :label-width="'120px'"
      />
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      formData: {
        name: 'Bob',
        age: 21,
        sex: '男',
        phone: ''
      }
    }
  },
  computed: {
    formOption() {
      return [
        {
          label: '姓名',
          prop: 'name',
          placeholder: '请输入姓名',
          type: 'input'
        },
        {
          label: '姓名',
          prop: 'name',
          placeholder: '请输入姓名',
          type: 'input'
        },
        {
          label: '年龄',
          prop: 'age',
          placeholder: '请输入年龄',
          type: 'input'
        },
        {
          label: '性别',
          prop: 'sex',
          placeholder: '请选择性别',
          type: 'select',
          options: [
            {
              value: '1',
              label: '男'
            },
            {
              value: '0',
              label: '女'
            }
          ]
        },
        {
          label: '手机号',
          prop: 'phone',
          placeholder: '请输入手机号',
          type: 'input'
        },
        {
          label: '地址',
          prop: 'address',
          placeholder: '请输入地址',
          type: 'textarea'
        },
        {
          label: '病例内容',
          prop: 'content',
          placeholder: '请输入病例内容',
          type: 'textarea'
        }
      ]
    }
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
  .page-content{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 20px;
    height: calc(100vh - 50px) !important;
    .form-box{
      flex: 1;
    }
  }
</style>

